<template>
    <div class="table-container">
        <div class="table-query">
            <div class="table-query-left">
                <div class="table-query-item">
                    <span class="table-query-item-tilte">用户名:</span>
                    <el-input class="table-query-item-insert" v-model="input" placeholder="Please input" />
                </div>
                <div class="table-query-item">
                    <span class="table-query-item-tilte">用户名:</span>
                    <el-input class="table-query-item-insert" v-model="input" placeholder="Please input" />
                </div>
                <div class="table-query-item">
                    <span class="table-query-item-tilte">用户名:</span>
                    <el-input class="table-query-item-insert" v-model="input" placeholder="Please input" />
                </div>
            </div>
            <div class="form-query-right">
                <el-button type="primary" :icon="Search">Search</el-button>
            </div>
        </div>
        <!-- <div id="futakiTableHeight" class="table-content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div> -->
        <div class="table-pagination">
            <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import {
    Search
} from '@element-plus/icons-vue'
const currentPage4 = ref('')
const pageSize4 = ref('')
const input = ref('')
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style lang="scss" scoped>
</style>